<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/"/>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>简单路径</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
    </style>
</head>

<body>
<div id="container"></div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=880e912f401dc3ab913e4a1b1c151267'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function (pathData, pathIndex) {

                return pathData.path;
            },
            getHoverTitle: function (pathData, pathIndex, pointIndex) {

                if (pointIndex >= 0) {
                    //point
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }

                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {

                renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
                pathLineStyle: {
                    dirArrowStyle: true
                },
                getPathStyle: function (pathItem, zoom) {

                    var color = '#00f',//路径颜色
                        lineWidth = Math.round(1 * Math.pow(1.1, zoom - 3));//路径宽度

                    return {
                        pathLineStyle: {
                            strokeStyle: color,
                            lineWidth: lineWidth
                        },
                        pathLineSelectedStyle: {
                            lineWidth: lineWidth + 2
                        },
                        pathNavigatorStyle: {
                            fillStyle: color
                        }
                    };
                }
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        //设置数据
        pathSimplifierIns.setData([{
            name: '路线0',
            path: [
                [104.067198,30.546218],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.065873,30.546249],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.067028,30.546207],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.06646,30.546754],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066458,30.546551],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066283,30.545683],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066436,30.547075],
                [104.066462,30.546357],
                [104.066462,30.546357],
                [104.066462,30.546357],
                [104.066462,30.546357],
                [104.066462,30.546357],
                [104.066462,30.546357],
                [104.066462,30.546357],
                [104.066462,30.546357],
                [104.067183,30.546219],
                [104.067183,30.546219],
                [104.067183,30.546219],
                [104.067183,30.546219],
                [104.067183,30.546219],
                [104.067183,30.546219],
                [104.067183,30.546219],
                [104.067183,30.546219],
                [104.067183,30.546219],
            ]
        }]);

        //对第一条线路（即索引 0）创建一个巡航器
        var navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: true, //循环播放
            speed: 1000 //巡航速度，单位千米/小时
        });

        navg1.start();
    });
</script>
</body>

</html>